<template>
	<view class="presale-product-wrap" :data-theme='theme()' :class="theme() || ''">
		<!--{{$t('plus.event_advertisement')}}-->
		<view class="top-box">
			<!-- 搜索框 -->
			<view class="index-search-box d-b-c" id="searchBox">
				<view class="index-search t-c flex-1">
					<span class="icon iconfont icon-sousuo"></span>
					<input type="text" v-model="searchForm" class="flex-1 ml10 f30 gray3" placeholder-class="f24 gray6"
						:placeholder="$t('plus.input_product')" confirm-type="search" @confirm="search()" />
				</view>
				<view class="f26" @click="gotoPage('/pages/order/myorder')">{{ $t('plus.my_reservations') }}</view>
			</view>
		</view>
		<view class="presale-list-wrap" v-if="!loading">
			<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'"
				lower-threshold="50" @scrolltolower="scrolltolowerFunc">
				<view class="diy-banner-box pt20 mb20 pr square">
					<swiper class="swiper" autoplay :interval="3000" :duration="500" @change="changeSwiper">
						<swiper-item v-for="(item, index) in banner" :key="index" @click="gotoPages(item)">
							<image :src="item"></image>
						</swiper-item>
					</swiper>
					<view class="swiper-dots ww100 d-s-c square">
						<view :class="current == index ? 'swiper-dot active' : 'swiper-dot'" v-for="(item, index) in banner"
							:style="current == index ? 'background-color:#ffffff;' : ''" :key="index">
						</view>
					</view>
				</view>
				<!--{{$t('plus.event_category')}}-->
				<!-- <view class="active-top-tab">
					<scroll-view scroll-X="true" scroll-with-animation :scroll-into-view="'tab'+(typeActive - 2)"
						show-scrollbar="false" class="scroll-X  mb30">
						<view class="tab-list d-s-c">
							<view class="logo" id="tab-2">
								<image src="/static/presale.png" mode=""></image>
							</view>
							<view class="tab-item" id="tab-1">
								<view class="actab-title">{{$t('plus.hot_sales')}}</view>
								<view class="actab-status">{{$t('plus.don't_miss')}} </view>
							</view>
							<view class="tab-item" :id="'tab'+index" :class="{ active: typeActive == index }"
								v-for="(item, index) in activeList" :key="index" @click="tabTypeFunc(index)">
								<view class="actab-title">{{ item.title }}</view>
								<view class="actab-status">{{$t('plus.coming_soon')}}</view>
							</view>
						</view>
					</scroll-view>
				</view> -->
				<!--{{$t('plus.list')}}-->
				<view class="list p-0-20">
					<view class="item d-stretch" v-for="(item, index) in listData" :key="index"
						@click="gotoDetail(item.productId)">
						<view class="product-cover">
							<image :src="item.imagePath" mode="aspectFit"></image>
						</view>
						<view class="d-b-c d-c flex-1 ml26">
							<view class="product-title ww100">{{ item.productName }}</view>
							<view class="d-s-c ww100">
								<Countdown ref="countdown" :color="'#999999'" :timeSize="'22rpx'"
									:config="{ startstamp: new Date(item.startTime).valueOf() / 1000, endstamp: new Date(item.endTime).valueOf() / 1000 }"
									@returnVal="returnValFunc"></Countdown>
							</view>
							<view class="ww100">
								<text class="dj-text">{{ $t('plus.deposit') }}:HK${{ item.money }}</text>
								<text class="ml20  gray6 f20">{{ $t('plus.final_payment_discount') }}HK${{
									item.sku[0].advancePrice }}</text>
							</view>
							<view class="slider-box ww100 d-b-c">
								<view>
									<view class="f32 redF11"><text class="f16 fb">HK$</text>{{ (item.sku[0].productPrice * 1
										- item.sku[0].advancePrice * 1).toFixed(2) }}
									</view>
									<view class="f20 gray9">{{ $t('plus.estimated_price') }}</view>
								</view>
								<view class="right-btn ml30"><button type="primary">{{ $t('plus.flash_sale') }}</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">{{ $t('plus.no_records') }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown-presale.vue';
export default {
	components: {
		Countdown
	},
	data() {
		return {
			current: 0,
			banner: [{
				imgUrl: '/static/point_bg.png'
			}, {
				imgUrl: '/static/card.png'
			}],
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*活动列表*/
			activeList: [],
			/*当前活动角标*/
			typeActive: 0,
			/*类别选中*/
			currActive: {},
			/*产品列表*/
			listData: [],
			/*当前页面*/
			page: 1,
			/*没有更多*/
			no_more: false,
			/*活动详情*/
			detailData: {},
			/*是否正在加载*/
			loading: true,
			/*倒计时配置*/
			countdownConfig: {
				/*开始时间*/
				startstamp: 0,
				/*结束时间*/
				endstamp: 0
			},
			searchForm: ''
		};
	},
	computed: {},
	onLoad() {
		this.getData();
	},
	mounted() {
		this.init();
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: this.$t('order.pre_sale')
		})
	},
	onPullDownRefresh() { },
	methods: {
		search() {
			this.listData = [];
			this.page = 1;
			this.loading = true;
			this.getData();
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		/*初始化*/
		init() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-box');
					view.boundingClientRect(data => {
						let h = _this.phoneHeight - data.height;
						_this.scrollviewHigh = h;
					}).exec();
				}
			});
		},

		/*类别切换*/
		tabTypeFunc(e) {
			this.typeActive = e;
			this.currActive = this.activeList[e];
			this.getData();
		},
		goback() {
			uni.navigateBack()
		},
		/*可滚动视图区域到底触发*/
		// scrolltolowerFunc() {
		// 	let self = this;
		// 	self.page++;
		// 	self.loading = true;
		// 	if (self.page > self.last_page) {
		// 		self.loading = false;
		// 		self.no_more = true;
		// 		return;
		// 	}
		// 	self.getData();
		// },
		/*获取数据*/
		getData() {
			let self = this;
			self.loading = true;
			self._get(
				'plus/advance/product/index', {
				search: self.searchForm,
				page: self.page
			},
				function (res) {
					self.banner = res.data.setting.image && res.data.setting.image;
					self.loading = false;
					self.listData = res.data.list;
					/* self.listData = self.listData.concat(res.data.list.data);
					self.last_page = res.data.list.last_page;
					if (res.data.list.last_page <= 1) {
						self.no_more = true;
					} */
				}
			);
		},

		/*跳转产品详情*/
		gotoDetail(e) {
			// this.$refs.countdown.forEach(item=>{
			// 	item.clear();
			// })
			this.gotoPage('/pages/product/detail/detail?productId=' + e);
		},

		/*跳转搜索页面*/
		gotoSearch() {
			this.getData();
		},

		/*倒计时返回值*/
		returnValFunc(e) {

		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #F2F2F2;
}

.top-box {
	position: relative;
}

.presale-product-wrap .tab-item {
	flex: 0;
	padding: 0 25rpx;
	font-size: 33rpx;
	height: 86rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	white-space: nowrap;
	color: #333333;
}

.presale-product-wrap .logo {
	width: 75rpx;
	height: 69rpx;
	margin-right: 18rpx;
	padding-left: 24rpx;
	flex-shrink: 0;

	image {
		width: 75rpx;
		height: 69rpx;
	}
}

.presale-product-wrap .tab-item .actab-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}

.presale-product-wrap .tab-item .actab-status {
	font-weight: bold;
	color: #666666;
	font-size: 17rpx;
	height: 30rpx;
	padding: 0 18rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15rpx;
}

.presale-product-wrap .tab-item.active .actab-status {
	background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
	color: #FFFFFF;
}

.presale-product-wrap .tab-item.active {
	font-size: 30rpx;
	opacity: 1;
	position: relative;
	margin-bottom: 0;
}

.presale-product-wrap .tab-item.active::after {
	display: none;
}

.presale-product-wrap .tab-item .status1 {}

.presale-product-wrap .tab-item.active .status1 {
	content: "";
	width: 120rpx;
	height: 4rpx;
	background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
	border-radius: 2rpx;
	position: absolute;
	border: 30rpx;

}

.presale-product-wrap .every-day-time text {
	padding: 8rpx 16rpx;
	font-size: 26rpx;
	color: #333;
	opacity: 0.5;
}

.presale-product-wrap .ad-activity {
	position: relative;
	overflow: hidden;
}

.presale-product-wrap .ad-activity image {
	width: 750rpx;
	height: 367rpx;
	border-radius: 12rpx;
}

.presale-list-wrap {}

.presale-list-wrap .list .item {
	padding: 30rpx;
	display: flex;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	background: #ffffff;
}

.presale-list-wrap .product-cover,
.presale-list-wrap .product-cover image {
	width: 212rpx;
	height: 212rpx;
	border-radius: 10rpx;
}

.active-top-tab .ad-datetime::v-deep .box {
	height: 40rpx;
	padding: 4rpx;
	line-height: 40rpx;
	text-align: center;
	border-radius: 8rpx;
	font-size: 28rpx;
	background: #F6220C;
	color: #FFFFFF;
}

.active-top-tab .ad-datetime::v-deep text {
	color: #333;
	font-size: 28rpx;
}

.presale-list-wrap .product-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	font-size: 24rpx;
}

.presale-list-wrap .already-sale {
	padding: 4rpx 0;
	color: #8228EB;
	font-size: 22rpx;
}

.dj-text {
	height: 31rpx;
	background-color: rgba($color: #FF0000, $alpha: 0.2);
	font-size: 20rpx;
	padding: 0 18rpx;
	color: #F11E0B;
	border-radius: 15rpx;
}

.presale-list-wrap .right-btn button {
	background: linear-gradient(140deg, #F11E0B 0%, #F77737 100%);
	color: #ffffff;
	height: 56rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 33rpx;
}

.reg180 {
	padding-right: 20rpx;
	text-align: right;
	transform: rotateY(180deg);
	position: absolute;
	bottom: 0;
}

.icon-jiantou {
	color: #FFFFFF;
	font-size: 30rpx;
}

.head_top {
	position: absolute;
	top: 0;
	z-index: 20;
	padding-top: var(--status-bar-height);
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 28rpx;
}

.tab-item.active::after {
	content: '';
	width: 60%;
	height: 4rpx;
	background: #F2F2F2;
	border-radius: 2rpx;
	position: absolute;
	bottom: 5rpx;
}

.diy-banner-box {
	overflow: hidden;
}

.diy-banner-box,
.diy-banner-box .swiper {
	width: 750rpx;

	/* background-color: #FFFFFF; */
}

.diy-banner-box image {
	margin: 0 auto;
	width: 702rpx;
	height: 300rpx;
	border-radius: 12rpx;
}

.diy-banner-box.square .swiper-dots {
	position: absolute;
	bottom: 20rpx;
	left: 44rpx;
	margin: auto;
}

.swiper-dots.square .swiper-dot {
	width: 28rpx;
	height: 6rpx;
	border-radius: 3rpx;
	margin: 0 4rpx;
	background: #ffffff;
	opacity: 0.4;
}

.swiper-dots.square .swiper-dot.active {
	opacity: 0.8;
}

.index-search-box {
	background-color: #FFFFFF;

	.index-search {
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #DDDDDD;
		border-radius: 30rpx;
		margin-right: 15rpx;
	}
}
</style>
